<template>
  <view class="recent-message">
    <view class="header">
      <text class="title">最近消息</text>
      <view class="more">
        <text>你有新消息未读</text>
        <text class="badge">7</text>
        <text class="arrow">></text>
      </view>
    </view>
    
    <view class="message-list">
      <view class="message-item">
        <image class="icon" src="/static/images/message/car.png" mode="aspectFit"></image>
        <view class="content">
          <text class="name">哈啰顺风车</text>
          <text class="desc">行程即将开启通知</text>
        </view>
        <text class="time">3小时前</text>
      </view>
      
      <view class="message-item">
        <image class="icon" src="/static/images/message/ant.png" mode="aspectFit"></image>
        <view class="content">
          <text class="name">蚂蚁森林</text>
          <text class="desc">神秘好友悄悄收走了你的能量</text>
        </view>
        <text class="time">9小时前</text>
      </view>
    </view>
  </view>
</template>

<script setup>
</script>

<style lang="scss">
.recent-message {
  background: #fff;
  margin: 20rpx;
  padding: 24rpx;
  border: 1px solid #eee;
  border-radius: 16rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }

    .more {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;

      .badge {
        background: #ff4d4f;
        color: #fff;
        border-radius: 20rpx;
        padding: 0 8rpx;
        margin: 0 8rpx;
        font-size: 22rpx;
      }

      .arrow {
        color: #999;
      }
    }
  }

  .message-list {
    .message-item {
      display: flex;
      align-items: center;
      // padding: 8rpx 0;

      .icon {
        width: 50rpx;
        height: 50rpx;
        border-radius: 28rpx;
        margin-right: 16rpx;
      }

      .content {
        flex: 1;
        
        .name {
          font-size: 26rpx;
          color: #333;
          margin-bottom: 2rpx;
        }

        .desc {
          font-size: 24rpx;
          color: #999;
        }
      }

      .time {
        font-size: 22rpx;
        color: #999;
        margin-left: 12rpx;
      }
    }
  }
}
</style> 